<template>
	<view class="table-page">
		<view v-for="item of pageList" class="page-item" :class="{active:pageIndex==item.value}"
			@click="clickPage(item)">
			<template v-if="item.type=='page'">
				{{item.value}}
			</template>
			<template v-else>
				<uni-icons :type="item.type" size="1.4vw"></uni-icons>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			paperList: {
				type: Array,
				default: () => []
			},
			pageIndex: {
				type: Number,
				default: 1
			},
			itemPerPage: {
				type: Number,
				default: 20
			}
		},
		data() {
			return {

			}
		},
		computed: {
			maxPageCount() {
				return Math.ceil(this.paperList.length / this.itemPerPage)
			},
			pageList() {
				let pageList = [{
					type: "page",
					value: this.pageIndex
				}];

				//左
				if (this.pageIndex - 3 <= 1) { //当前页接近开头
					for (let i = this.pageIndex - 1; i >= 1; i--) {
						pageList.unshift({
							type: "page",
							value: i
						})
					}
				} else {
					pageList.unshift({
						type: "page",
						value: 1
					}, {
						type: "more-filled",
						value: "left"
					}, {
						type: "page",
						value: this.pageIndex - 2
					}, {
						type: "page",
						value: this.pageIndex - 1
					})
				}
				//右
				if (this.pageIndex + 3 >= this.maxPageCount) { //当前页接近结尾
					for (let i = this.pageIndex + 1; i <= this.maxPageCount; i++) {
						pageList.push({
							type: "page",
							value: i
						})
					}
				} else {
					pageList.push({
						type: "page",
						value: this.pageIndex + 1
					}, {
						type: "page",
						value: this.pageIndex + 2
					}, {
						type: "more-filled",
						value: "right"
					}, {
						type: "page",
						value: this.maxPageCount
					})
				}


				//左右箭头
				pageList.unshift(({
					type: "left"
				}))
				pageList.push({
					type: "right"
				})
				console.log("pageList", pageList)
				return pageList
			}
		},
		methods: {
			clickPage(item) {
				let pageIndex = this.pageIndex;
				if (item.type == "page") {
					pageIndex = item.value;
				}
				if (item.type == "left" && this.pageIndex > 1) {
					pageIndex--
				}
				if (item.type == "right" && this.pageIndex < this.maxPageCount) {
					pageIndex++
				}
				this.$emit("changePageIndex", pageIndex);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.table-page {
		box-sizing: border-box;
		border-top: 0.1vw solid #ddd;
		margin: 0 0.6vw;
		height: 5vw;
		display: flex;
		justify-content: center;
		align-items: center;

		// background-color: red;
		.page-item {
			width: 2.5vw;
			height: 2.5vw;
			line-height: 2.5vw;
			border-radius: 50%;
			text-align: center;
			margin: 0 0.25vw;

			&.active {
				color: #fff;
				background-color: #2380E9;
			}
		}
	}
</style>